<template>
	<view class="flex-box">
		<view class="title">我的记事本</view>
		<view class="content">
			<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="a-notebook" :where="where">
				<view v-if="error">{{error.message}}</view>
				<view v-else>
					<self-loading v-if="loading" height="50vh" />

					<view class="list" v-else-if="data && data.length">
						<view class="item" v-for="item in data" :key="item._id" @click="look(item)">
							<image class="icon" src="/static/icon/file.png" mode="widthFix"></image>
							<view class="title">{{item.title}}</view>
						</view>
					</view>

					<no-data v-else />

				</view>
			</unicloud-db>
		</view>
		<view class="btn-box">
			<van-button icon="plus" type="primary" size="small" @click="add()">新增</van-button>
		</view>

		<view>
			<van-popup v-model:show="popup.show" position="right" round z-index="998"
				style="height: 100vh; width: 400px;background: #f8f8f8;">
				<view>
					<van-cell-group title="填写你的新记录"></van-cell-group>
				</view>
				<van-form @submit="onSubmit" class="form">
					<van-cell-group inset>
						<van-field v-model="form.title" name="title" label="标题" placeholder="标题"
							:rules="[{ required: true, message: '请填写标题' }]" />
						<van-field v-model="form.content" type="textarea" name="content" label="内容" placeholder="内容" rows="2"
							autosize :rules="[{ required: true, message: '请填写内容' }]" style="max-height: 340px; overflow-y: auto;" />
					</van-cell-group>
					<view class="form-btn">
						<template v-if="form.type==='add'">
							<van-button class="submit-btn" round block type="primary" native-type="submit">
								提交
							</van-button>
						</template>
						<template v-else>
							<van-button class="submit-btn mr-10" round block type="danger" @click="onDelete">
								删除
							</van-button>
							<van-button class="submit-btn" round block type="primary" @click="onUpdate">
								确认修改
							</van-button>
						</template>
					</view>
				</van-form>

			</van-popup>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref, toRefs } from 'vue';
	import { popupStore } from '@/store/vant';
	const db = uniCloud.database()
	const popup = popupStore()

	const udb = ref()
	const where = ref('uid==$cloudEnv_uid')

	const form = reactive({
		type: 'add',
		title: '',
		content: ''
	});
	const popupItem = ref({})
	async function onSubmit(values) {
		try {
			uni.showLoading({ title: '请稍后...' })
			let { result } = await db.collection('a-notebook').add(values)
			uni.hideLoading()
			uni.showToast({
				title: '新增成功',
				icon: 'none'
			})
			popup.taggle()
			refreshList()
		} catch (error) {
			uni.showToast({
				title: error,
				icon: 'none'
			})
		}
	};
	async function onUpdate(values) {
		let { _id } = popupItem.value
		let { title, content } = form
		try {
			uni.showLoading({ title: '请稍后...' })
			let { result } = await db.collection('a-notebook')
				.where(`_id=='${_id}'`)
				.update({
					title,
					content
				})
			uni.hideLoading()
			uni.showToast({
				title: '修改成功',
				icon: 'none'
			})
			popup.taggle()
			refreshList()
		} catch (error) {
			uni.showToast({
				title: error,
				icon: 'none'
			})
		}
	}

	function onDelete() {
		uni.showModal({
			title: '提示',
			content: `即将删除: [ ${popupItem.value.title} ] 这条记录,确定吗?`,
			complete: async (res) => {
				if (!res.confirm) return
				try {
					uni.showLoading({ title: '请稍后...' })
					let { result } = await db.collection('a-notebook')
						.where(`_id=='${popupItem.value._id}'`)
						.remove()
					uni.hideLoading()
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					})
					popup.taggle()
					refreshList()
				} catch (error) {
					uni.showToast({
						title: error,
						icon: 'none'
					})
				}
			}
		})
	}

	function refreshList() {
		udb.value.reset()
		udb.value.refresh()
	}

	function add() {
		resetForm()
		popup.disable = false
		popup.taggle()
	}

	function look(item) {
		form.type = 'look'
		form.title = item.title
		form.content = item.content
		popup.disable = true
		popupItem.value = JSON.parse(JSON.stringify(item))
		popup.taggle()
	}

	function resetForm() {
		form.type = 'add'
		form.title = ''
		form.content = ''
	}
</script>

<style lang="scss" scoped>
	.flex-box {
		display: flex;
		flex-direction: column;

		>.title {
			height: 42px;
			border-bottom: 1px solid #f1f1f1;
			display: flex;
			align-items: center;
			padding-left: 20px;
			font-size: 16px;
		}

		.content {
			flex: 1;
		}

		.btn-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 10px;
		}
	}

	.list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		.item {
			width: 80px;
			margin-top: 15px;
			margin-left: 15px;
			padding: 20px;

			&:hover {
				background: #f1f1f1;
				cursor: pointer;
			}

			.icon {
				width: 70px;
				height: 70px;
			}

			.title {
				font-size: 12px;
				color: #222;
				text-align: center;
				margin-top: 6px;
			}
		}

	}

	.form {
		margin-top: 20px;

		.form-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 20px;

			.submit-btn {
				width: 120px;
			}
		}
	}

	.bg-white {
		background: white;
	}
</style>